<template>
  <div class="roleLimitManage">
      <div class="title">角色权限管理</div>
      <div class="mainInfo">
        <div class="add">
          <div class="addbtn" @click="addRoleLimitManage">添加</div>
        </div>
        <table border="0" cellspacing="0" cellpadding="0" class="table">
          <thead class="thead">
            <th>序号</th>
            <th>角色名称</th>
            <th>角色描述</th>
            <th>操作</th>
          </thead>
          <tbody v-if="this.$store.state.roleLimitManage.total" class="tbody">
            <tr v-for="(item, index) in this.$store.state.roleLimitManage.tableData" :key="item.id">
              <td>{{index>= 9 ? index+1 : '0'+ (index + 1)}}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.roleDescribe }}</td>
              <td>
                <span class="write" @click="writeroleLimitManage(item.id)">编辑</span>
                <span
                  class="delete"
                  @click="deleteroleLimitManage(item)"
                >删除</span>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="block" v-if="this.$store.state.roleLimitManage.total">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="this.$store.state.roleLimitManage.total"
          ></el-pagination>
        </div>
        <!-- 当表头为空时 -->
        <div class="empty" v-if="!this.$store.state.roleLimitManage.total">
          <img src="@/assets/scene/empty.png" alt class="emptyLogo" />
          <span>空空如也</span>
        </div>
      </div>
      <delete-alert-box
      v-if="isShowDelete"
      :isDelete=isDelete
      :descTips=descTips
      @Confirm=Confirm
      @Cancel=Cancel
      ></delete-alert-box>
  </div>
</template>
<script>
import { deleteRoleType } from '@/api/roleLimitManage'
export default {
  data () {
    return {
      pageIndex: 1,
      currentPage: 1,
      id: '',
      name: '',
      roleDescribe: '',
      isDelete: false,
      isShowDelete: false,
      descTips: [],
      deleteId: ''
    }
  },
  methods: {
    Confirm () {
      const id = this.deleteId
      deleteRoleType(id).then(res => {
        if (res.data.code === 200) {
          this.getTable()
          this.isShowDelete = false
          this.$message({
            type: 'success',
            message: res.data.message
          })
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    Cancel () {
      this.isShowDelete = false
    },
    async getTable () {
      await this.$store.dispatch('roleLimitManage/updateTable', this.pageIndex)
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.pageIndex = val
      this.getTable()
    },
    // 删除
    async deleteroleLimitManage (item) {
      this.deleteId = item.id
      if (!item.isRelate) {
        this.descTips = [{
          tips: `确定删除"${item.name}"？`,
          subTips: '删除之后，相关内容都会被删除。',
          default: ''
        }]
        this.isDelete = true
      } else {
        this.descTips = [{
          tips: '已有员工关联“运营人员”角色，无法删除。',
          default: ''
        }]
        this.isDelete = false
      }
      this.isShowDelete = true
    },
    // 添加角色
    addRoleLimitManage () {
      window.sessionStorage.removeItem('infoId')
      this.$router.push({
        path: '/addRoleLimitManage'
      })
    },
    // 编辑角色
    writeroleLimitManage (id) {
      sessionStorage.setItem('infoId', id)
      this.$router.push({
        path: '/addRoleLimitManage'
      })
    }
  },
  created () {
    this.getTable()
  },
  components: {
  }
}
</script>

<style scoped lang="scss">
.roleLimitManage {
  overflow-y: auto;
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0 30px 30px;
  .title {
    margin-top: 29px;
    width: 100%;
    background-color: #f2f2f2;
    height: 61px;
    font-size: 24px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 33px;
  }
  .mainInfo {
    position: relative;
    width: 100%;
    min-height: calc(100% - 90px);
    background-color: #fff;
    .add {
      position: relative;
      height: 90px;
      border-bottom: 1px solid #f2f2f2;
      .addbtn {
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 30px;
        width: 108px;
        height: 42px;
        background: rgba(72, 104, 255, 1);
        border-radius: 21px;
        font-size: 16px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 42px;
        text-align: center;
      }
    }
    .table {
      width: 100%;
      padding: 0 30px;
      margin-top: 20px;
      background-color: #fff;
      .thead {
        background: rgba(87, 131, 255, 0.05);
        font-size: 14px;
        font-weight: 500;
        th {
          color: rgba(51, 51, 51, 1);
          height: 60px;
          line-height: 60px;
          text-align: left;
          padding-left: 24px;
          border-bottom: solid 1px rgba(230, 230, 230, 1);
        }
      }
      .tbody {
        height: calc(100% - 60px);
        tr {
          height: 64px;
          td {
            color: #666666;
            font-size: 14px;
            max-width: 200px;
            font-weight: 400;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: left;
            padding-left: 24px;
            border-bottom: rgba(242, 242, 242, 1) 1px solid;
            .write {
              float: left;
              cursor: pointer;
              font-size: 14px;
              font-weight: 500;
              color: rgba(72, 104, 255, 1);
              text-decoration: underline;
            }
            .delete {
              float: left;
              cursor: pointer;
              margin-left: 24px;
              font-size: 14px;
              font-weight: 500;
              color: rgba(251, 70, 70, 1);
              text-decoration: underline;
            }
            span {
              float: left;
              padding-left: 4px;
            }
          }
        }
      }
    }
    .block {
      padding: 24px 0;
      margin-right: 28px;
      overflow: hidden;
      ::v-deep .el-pagination{
        float: right;
      }
    }

    .empty {
      position: relative;
      .emptyLogo {
        position: absolute;
        top: 156px;
        left: 50%;
        transform: translateX(-50%);
        width: 240px;
        height: 240px;
      }
      span {
        font-size: 16px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        position: absolute;
        top: 408px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .deleteBox {
      position: fixed;
      top: 150px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
      width: 560px;
      height: 360px;
      background: rgba(255, 255, 255, 1);
      border-radius: 5px;
    }
  }
}
</style>
